<template>
    <el-card shadow="never">
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
            <el-row :gutter="15">

            </el-row>
        </el-form>


        <el-card :bordered="false" dis-hover class="ivu-mt" :header="'运营用户'">


            <!-- 数据表格 -->

            <ele-pro-table ref="table" :datasource="datasource" :columns="columns">

                <template v-slot:toolbar>


                    <el-button
                            size="small"
                            type="info"
                            icon="el-icon-_save"
                            class="ele-btn-icon"
                            @click="onExport"
                    >
                        导出
                    </el-button>

                </template>


            </ele-pro-table>


        </el-card>


    </el-card>

</template>

<script>

    import {xcxUser,xcxUserExport} from '@/api/account/log';
    import { utils, writeFile } from 'xlsx';

    const DEFAULT_FORM = {
        account_id: 0,
        type: 1,
        point: '',
    };

    export default {
        name: 'OperationUser',
        components: {},
        props: {
            // 弹窗是否打开
            visible: Boolean,
            // 修改回显的数据
            data: [],

            uid: {
                type: Number,
                default: 0
            },
        },
        data() {
            return {
                // 表格列配置
                columns: [
                    {
                        columnKey: 'selection',
                        type: 'selection',
                        width: 45,
                        align: 'center',
                        fixed: 'left'
                    },
                    {
                        columnKey: 'index',
                        type: 'index',
                        width: 45,
                        align: 'center',
                        showOverflowTooltip: true,
                        fixed: 'left'
                    },

                    {
                        prop: 'telphone',
                        label: '手机号',
                        showOverflowTooltip: true,
                        minWidth: 110,

                    },
                    {
                        prop: 'export_time',
                        label: '导出时间',
                        showOverflowTooltip: true,
                        minWidth: 110,

                    },


                ],
                // 表单数据
                form: {...DEFAULT_FORM},

                // 提交状态
                loading: false,
                // 是否是修改
                isUpdate: false
            };
        },
        methods: {
            /* 表格数据源 */
            datasource({page, limit, where, order, filterValue}) {

                return xcxUser({
                    ...where,
                    ...order,
                    ...filterValue,
                    page,
                    limit,

                });
            },
            onExport(where) {


                xcxUserExport({
                    ...where,



                }).then((data) => {

                    this.exportData = data.list;
                    let array = [];
                    array = [
                        ['手机号','上次导出时间']
                    ];
                    this.exportData.forEach((d, i) => {
                        array.push([d.telphone,d.export_time]);


                    });
                    const sheet = utils.aoa_to_sheet(array);
                    // 如果需要设置列宽可以这样写
                    sheet["!cols"] = [
                        {wch: 20},
                    ];
                    writeFile(
                        {
                            SheetNames: ['Sheet1'],
                            Sheets: {
                                Sheet1: sheet
                            }
                        },
                        '小程序用户.xlsx'
                    );

                }).catch((e) => {
                    this.$message.error(e.message);
                });


            },
            /* 刷新表格 */
            reload(where) {
                this.$refs.table.reload({page: 1, where: where});
            },

            /* 保存编辑 */
            save() {

                this.$refs['form'].validate((valid) => {
                    if (!valid) {
                        return false;
                    }
                    this.loading = true;

                    const data = {
                        ...this.form,
                        account_id: this.data.id
                    };

                    addLog(data).then((msg) => {
                        this.$message.success(msg);
                        this.reload();
                        this.loading = false;
                    }).catch((e) => {
                        this.$message.error(e.message);
                        this.loading = false;
                    });


                });
            },
            /* 更新visible */
            updateVisible(value) {
                this.$emit('update:visible', value);
            },
            /* 删除 */
            remove(row) {
                const loading = this.$loading({lock: true});
                remove(row.id)
                    .then((msg) => {
                        loading.close();
                        this.$message.success(msg);
                        this.reload();
                    })
                    .catch((e) => {
                        loading.close();
                        this.$message.error(e.message);
                    });
            },
        },
        watch: {
            uid() {
                this.reload();
            },
            visible(visible) {
                if (visible) {
                    if (this.data) {
                        this.form = {...DEFAULT_FORM};
                        this.$util.assignObject(this.form, this.data);
                        this.isUpdate = true;
                        this.form.account_id = this.data.id;
                    } else {
                        this.isUpdate = false;
                    }
                } else {
                    this.$refs['form'].clearValidate();
                    this.form = {...DEFAULT_FORM};
                }
            }
        }
    };
</script>
